<template>
    <van-nav-bar title="商品详情" left-arrow fixed placeholder />
    <img class="good-image" src="https://th.bing.com/th/id/R.e1dc80b52123994c087255d4708438e1?rik=0LgALA11W3s57Q&riu=http%3a%2f%2fd.ifengimg.com%2fq100%2fimg1.ugc.ifeng.com%2fnewugc%2f20190917%2f16%2fwemedia%2f7d77adea36a2cc04264273bc69810e0e55086c1f_size271_w960_h640.jpg&ehk=9gsjGk2uOiKIDZeksFxSjSjtaJ%2bp05165ZieVFUkFfk%3d&risl=&pid=ImgRaw&r=0" alt="">
    <div class="good-info">
        <p class="price">199/人</p>
        <p class="good-name">商品名称商品名称商品名称商品名称商品名称商品名称</p>
    </div>
    <div class="feature">
        <p class="feature-title">产品特色</p>
        <img src="https://img95.699pic.com/photo/50042/6858.jpg_wh860.jpg" alt="">
        <img src="https://img95.699pic.com/photo/50042/6858.jpg_wh860.jpg" alt="">
        <img src="https://img95.699pic.com/photo/50042/6858.jpg_wh860.jpg" alt="">
    </div>
    <van-button class="submit" type="primary">立即报名</van-button>
    <div style="height: 100px;"></div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less"> 
    .good-image{
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }
    .good-info{
        background-color: #fff;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        .price{
            font-size: 22px;
            font-weight: bold;
            color: #f00;
            padding-bottom: 10px;
        }
        .good-name{
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 10px;
        }
    }
    .feature{
        background-color: #fff;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        .feature-title{
            font-size: 18px;
            font-weight: bold;
            padding-bottom: 10px;
        }
        img{
            width: 100%;
        }
    }
    .submit{
        position: fixed;
        bottom: 15px;
        left: 0;
        right: 0;
        margin: 10px;
    }
</style>